<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm w-full">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>在线巡查</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">一屏汇聚展示</span>
                </div>
                <!-- 顶部概览卡片 -->
                <div class="grid grid-cols-4 gap-4 mb-6">
                    <!-- 企业总数统计卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                            <i class="fas fa-building text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">企业总数</div>
                            <div class="text-2xl font-bold text-gray-900">186</div>
                            <div class="text-xs text-green-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 较上月增加 8 家
                            </div>
                        </div>
                    </div>
                    <!-- 本月巡查统计卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
                            <i class="fas fa-clipboard-check text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">本月巡查</div>
                            <div class="text-2xl font-bold text-gray-900">78</div>
                            <div class="text-xs text-green-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 同比增长 12%
                            </div>
                        </div>
                    </div>
                    <!-- 安全隐患统计卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
                            <i class="fas fa-exclamation-triangle text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">安全隐患</div>
                            <div class="text-2xl font-bold text-gray-900">342</div>
                            <div class="text-xs text-red-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 待整改 56 项
                            </div>
                        </div>
                    </div>
                    <!-- 风险等级分布卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-4">
                            <i class="fas fa-chart-pie text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">高风险企业</div>
                            <div class="text-2xl font-bold text-gray-900">24</div>
                            <div class="text-xs text-gray-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i> 重点监管对象
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第二行 - 地图展示区和实时监控数据 -->
                <div class="grid grid-cols-3 gap-6 mb-6">
                    <!-- 企业地理分布地图 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 col-span-2">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="font-bold text-lg text-gray-800">企业地理分布</h2>
                            <div class="flex space-x-2">
                                <button @click="showEnterpriseFilter"
                                    class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200">
                                    <i class="fas fa-filter mr-1"></i> 筛选
                                </button>
                                <a href="/search" data-readdy="true"
                                    class="px-3 py-1 bg-blue-600 text-white rounded text-sm flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-search mr-1"></i> 详细检索
                                </a>
                            </div>
                        </div>
                        <div class="grid grid-cols-4 gap-4">
                            <div class="col-span-3">
                                <div id="enterpriseMap" class="h-80 w-full" ref="enterpriseMap"></div>
                            </div>
                            <div class="overflow-y-auto h-80 pr-2">
                                <h3 class="font-medium text-sm text-gray-700 mb-2">区域企业分布</h3>
                                <div v-for="(region, index) in regionDistribution" :key="index" class="mb-3">
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-sm text-gray-700">{{ region.name }}</span>
                                        <span class="text-sm font-medium text-gray-900">{{ region.count }}</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="h-2 rounded-full"
                                            :style="{ width: region.percentage + '%', backgroundColor: region.color }">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 实时监控数据 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="font-bold text-lg text-gray-800">实时监控数据</h2>
                            <div class="text-xs text-gray-500">
                                <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
                            </div>
                        </div>
                        <!-- 实时指标 -->
                        <div class="space-y-4 mb-4">
                            <div v-for="(metric, index) in realTimeMetrics" :key="index"
                                class="bg-gray-50 p-3 rounded-lg">
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                                            :class="metric.iconBg">
                                            <i :class="metric.icon + ' ' + metric.iconColor"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-gray-500">{{ metric.name }}</div>
                                            <div class="text-lg font-bold" :class="metric.valueColor">{{ metric.value }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-20 h-12">
                                        <div :id="'trendChart' + index" class="w-full h-full"
                                            :ref="'trendChart' + index"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 预警信息 -->
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="font-medium text-sm text-gray-700">最新预警信息</h3>
                                <a href="/information-list" data-readdy="true" class="text-xs text-blue-600">查看全部</a>
                            </div>
                            <div class="space-y-2 max-h-40 overflow-y-auto">
                                <div v-for="(alert, index) in alertMessages" :key="index"
                                    class="flex items-start p-2 rounded-lg" :class="alert.bgColor">
                                    <div class="w-6 h-6 rounded-full flex items-center justify-center mr-2"
                                        :class="alert.iconBg">
                                        <i :class="alert.icon + ' text-xs ' + alert.iconColor"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="text-xs font-medium" :class="alert.textColor">{{ alert.title }}
                                        </div>
                                        <div class="text-xs text-gray-500">{{ alert.time }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第三行 - 巡查统计分析和问题隐患分布 -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- 巡查统计分析 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="font-bold text-lg text-gray-800">巡查统计分析</h2>
                            <div class="flex space-x-2">
                                <button :class="[
                                    'px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer',
                                    currentInspectionPeriod === 'month' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
                                ]" @click="changeInspectionPeriod('month')">
                                    月度
                                </button>
                                <button :class="[
                                    'px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer',
                                    currentInspectionPeriod === 'quarter' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
                                ]" @click="changeInspectionPeriod('quarter')">
                                    季度
                                </button>
                                <button :class="[
                                    'px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer',
                                    currentInspectionPeriod === 'year' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
                                ]" @click="changeInspectionPeriod('year')">
                                    年度
                                </button>
                            </div>
                        </div>
                        <!-- 巡查完成情况 -->
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div>
                                <div id="inspectionCompletionChart" class="h-60" ref="inspectionCompletionChart"></div>
                            </div>
                            <div>
                                <div id="inspectionTypeChart" class="h-60" ref="inspectionTypeChart"></div>
                            </div>
                        </div>
                        <!-- 巡查趋势 -->
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="font-medium text-sm text-gray-700">巡查趋势分析</h3>
                                <div class="text-xs text-gray-500">单位: 次</div>
                            </div>
                            <div id="inspectionTrendChart" class="h-44" ref="inspectionTrendChart"></div>
                        </div>
                    </div>
                    <!-- 问题隐患分布 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="font-bold text-lg text-gray-800">问题隐患分布</h2>
                            <div class="flex space-x-2">
                                <button :class="[
                                    'px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer',
                                    currentIssueFilter === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
                                ]" @click="changeIssueFilter('all')">
                                    全部
                                </button>
                                <button :class="[
                                    'px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer',
                                    currentIssueFilter === 'unresolved' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
                                ]" @click="changeIssueFilter('unresolved')">
                                    未整改
                                </button>
                                <button :class="[
                                    'px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer',
                                    currentIssueFilter === 'resolved' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
                                ]" @click="changeIssueFilter('resolved')">
                                    已整改
                                </button>
                            </div>
                        </div>
                        <!-- 隐患类型分布 -->
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div>
                                <div id="issueTypeChart" class="h-60" ref="issueTypeChart"></div>
                            </div>
                            <div>
                                <div id="riskLevelChart" class="h-60" ref="riskLevelChart"></div>
                            </div>
                        </div>
                        <!-- 整改情况 -->
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="font-medium text-sm text-gray-700">整改情况统计</h3>
                                <div class="text-xs text-gray-500">单位: 项</div>
                            </div>
                            <div id="fixStatusChart" class="h-44" ref="fixStatusChart"></div>
                        </div>
                    </div>
                </div>
                <!-- 第四行 - 重点企业监测 -->
                <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">重点企业监测</h2>
                        <a href="/summary-information" data-readdy="true"
                            class="text-sm text-blue-600 cursor-pointer">查看全部企业</a>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        企业名称</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        风险等级</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        上次巡查</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        未整改隐患</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        实时状态</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="(company, index) in keyCompanies" :key="index" class="hover:bg-gray-50">
                                    <td class="px-4 py-3">
                                        <div class="flex items-center">
                                            <img :src="company.logo" alt="企业logo"
                                                class="w-8 h-8 rounded-full object-cover object-top mr-3">
                                            <div>
                                                <div class="text-sm font-medium text-gray-900">{{ company.name }}</div>
                                                <div class="text-xs text-gray-500">{{ company.region }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="company.riskLevelClass">
                                            {{ company.riskLevel }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ company.lastInspection }}</div>
                                        <div class="text-xs text-gray-500">{{ company.inspectionResult }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ company.unresolvedIssues }}</div>
                                        <div class="flex items-center">
                                            <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2">
                                                <div class="h-1.5 rounded-full"
                                                    :style="{ width: company.issuePercentage + '%', backgroundColor: company.issueColor }">
                                                </div>
                                            </div>
                                            <span class="text-xs text-gray-500">{{ company.issuePercentage }}%</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center">
                                            <span class="h-2.5 w-2.5 rounded-full mr-2"
                                                :class="company.statusColor"></span>
                                            <span class="text-sm text-gray-900">{{ company.status }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <button @click="viewCompanyDetail(company)"
                                                class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">查看详情</button>
                                            <button @click="scheduleInspection(index)"
                                                class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">安排巡查</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 企业详情弹窗 -->
    <div v-if="showCompanyDetailModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-gray-800">企业详情</h3>
                <button @click="showCompanyDetailModal = false" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div v-if="currentCompanyDetail" class="space-y-4">
                <div class="flex items-center">
                    <img :src="currentCompanyDetail.logo" alt="企业logo"
                        class="w-16 h-16 rounded-full object-cover object-top mr-4">
                    <div>
                        <h4 class="text-lg font-medium text-gray-900">{{ currentCompanyDetail.name }}</h4>
                        <p class="text-sm text-gray-500">{{ currentCompanyDetail.region }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4 mt-4">
                    <div class="bg-gray-50 p-3 rounded">
                        <div class="text-sm text-gray-500">风险等级</div>
                        <div class="text-base font-medium">
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                :class="currentCompanyDetail.riskLevelClass">
                                {{ currentCompanyDetail.riskLevel }}
                            </span>
                        </div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                        <div class="text-sm text-gray-500">实时状态</div>
                        <div class="flex items-center">
                            <span class="h-2.5 w-2.5 rounded-full mr-2"
                                :class="currentCompanyDetail.statusColor"></span>
                            <span class="text-base font-medium">{{ currentCompanyDetail.status }}</span>
                        </div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                        <div class="text-sm text-gray-500">上次巡查</div>
                        <div class="text-base font-medium">{{ currentCompanyDetail.lastInspection }}</div>
                        <div class="text-xs text-gray-500">{{ currentCompanyDetail.inspectionResult }}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                        <div class="text-sm text-gray-500">未整改隐患</div>
                        <div class="text-base font-medium">{{ currentCompanyDetail.unresolvedIssues }}</div>
                        <div class="flex items-center">
                            <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2">
                                <div class="h-1.5 rounded-full"
                                    :style="{ width: currentCompanyDetail.issuePercentage + '%', backgroundColor: currentCompanyDetail.issueColor }">
                                </div>
                            </div>
                            <span class="text-xs text-gray-500">{{ currentCompanyDetail.issuePercentage }}%</span>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 p-3 rounded mt-4">
                    <div class="text-sm font-medium text-gray-700 mb-2">企业简介</div>
                    <p class="text-sm text-gray-600">
                        {{ currentCompanyDetail.description ||
                        '这是一家钢铁生产企业，主要从事钢铁冶炼、加工和销售业务。企业拥有完整的生产线和先进的生产设备，年产能达到100万吨。' }}
                    </p>
                </div>

                <div class="bg-gray-50 p-3 rounded">
                    <div class="text-sm font-medium text-gray-700 mb-2">联系方式</div>
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <div class="text-xs text-gray-500">联系人</div>
                            <div class="text-sm">{{ currentCompanyDetail.contact || '张经理' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500">电话</div>
                            <div class="text-sm">{{ currentCompanyDetail.phone || '13800138000' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500">邮箱</div>
                            <div class="text-sm">{{ currentCompanyDetail.email || 'contact@example.com' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500">地址</div>
                            <div class="text-sm">{{ currentCompanyDetail.address || '某省某市某区工业园区' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-end mt-6">
                <button @click="showCompanyDetailModal = false"
                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 mr-2">
                    关闭
                </button>
                <button @click="openScheduleFromDetail"
                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                    安排巡查
                </button>
            </div>
        </div>
    </div>

    <!-- 企业地理分布筛选弹窗 -->
    <div v-if="showEnterpriseFilterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 w-96 max-w-md">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">企业地理分布筛选</h3>
                <button @click="closeEnterpriseFilter" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="space-y-4">
                <!-- 区域筛选 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">区域</label>
                    <select v-model="enterpriseFilter.region" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="全部区域">全部区域</option>
                        <option value="华东地区">华东地区</option>
                        <option value="华北地区">华北地区</option>
                        <option value="华南地区">华南地区</option>
                        <option value="华中地区">华中地区</option>
                        <option value="西南地区">西南地区</option>
                        <option value="西北地区">西北地区</option>
                        <option value="东北地区">东北地区</option>
                    </select>
                </div>

                <!-- 风险等级筛选 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">风险等级</label>
                    <select v-model="enterpriseFilter.riskLevel" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="全部等级">全部等级</option>
                        <option value="高风险">高风险</option>
                        <option value="中风险">中风险</option>
                        <option value="低风险">低风险</option>
                    </select>
                </div>

                <!-- 状态筛选 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">状态</label>
                    <select v-model="enterpriseFilter.status" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="全部状态">全部状态</option>
                        <option value="正常运营">正常运营</option>
                        <option value="停产整顿">停产整顿</option>
                        <option value="暂停营业">暂停营业</option>
                    </select>
                </div>

                <!-- 企业规模筛选 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">企业规模</label>
                    <select v-model="enterpriseFilter.companySize" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="全部规模">全部规模</option>
                        <option value="大型企业">大型企业</option>
                        <option value="中型企业">中型企业</option>
                        <option value="小型企业">小型企业</option>
                        <option value="微型企业">微型企业</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-end mt-6 space-x-2">
                <button @click="resetEnterpriseFilter" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
                    重置
                </button>
                <button @click="closeEnterpriseFilter" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
                    取消
                </button>
                <button @click="applyEnterpriseFilter" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                    应用筛选
                </button>
            </div>
        </div>
    </div>

    <!-- 安排巡查确认弹窗（自定义） -->
    <div v-if="showScheduleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 w-96 max-w-md shadow-xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">安排巡查</h3>
                <button @click="cancelSchedule" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-3">
                <div class="text-sm text-gray-700">
                    确认对
                    <span class="font-medium text-gray-900">
                        {{ (scheduleTargetCompany && scheduleTargetCompany.name) || (scheduleTargetIndex !== null ? keyCompanies[scheduleTargetIndex]?.name : '') }}
                    </span>
                    安排巡查？
                </div>
                <div class="text-xs text-gray-500">
                    确认后将从“重点企业”列表中移除该企业。
                </div>
            </div>
            <div class="flex justify-end mt-6">
                <button @click="cancelSchedule" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 mr-2">取消</button>
                <button @click="confirmSchedule" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">确认安排</button>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import chinaMap from "./1.js";
import Header from '../components/Header.vue';
export default {
    components: {
    Header,
  },
    data() {
        return {
            showCompanyDetailModal: false,
            currentCompanyDetail: null,
            currentIssueFilter: 'unresolved', // 默认选中未整改
            currentInspectionPeriod: 'year', // 默认选中年度
            currentTime: '2025-07-08 15:32:45',
            // 企业地理分布筛选相关
            showEnterpriseFilterModal: false,
            // 安排巡查弹窗相关
            showScheduleModal: false,
            scheduleTargetIndex: null,
            scheduleTargetCompany: null,
            enterpriseFilter: {
                region: '全部区域',
                riskLevel: '全部等级',
                status: '全部状态',
                companySize: '全部规模'
            },
            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: false, link: '/risk-analysis' },
                        // { name: '重点风险提示', active: false, link: '/focus' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: false, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: true, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            regionDistribution: [
                { name: '华北地区', count: 42, percentage: 22.6, color: '#4299e1' },
                { name: '华东地区', count: 38, percentage: 20.4, color: '#48bb78' },
                { name: '华南地区', count: 28, percentage: 15.1, color: '#ecc94b' },
                { name: '华中地区', count: 26, percentage: 14.0, color: '#ed8936' },
                { name: '西北地区', count: 22, percentage: 11.8, color: '#9f7aea' },
                { name: '西南地区', count: 18, percentage: 9.7, color: '#f56565' },
                { name: '东北地区', count: 12, percentage: 6.4, color: '#667eea' }
            ],
            realTimeMetrics: [
                {
                    name: '高炉煤气压力',
                    value: '0.82 MPa',
                    icon: 'fas fa-tachometer-alt',
                    iconBg: 'bg-blue-100',
                    iconColor: 'text-blue-600',
                    valueColor: 'text-blue-600',
                    trend: [0.78, 0.80, 0.79, 0.81, 0.82, 0.81, 0.82]
                },
                {
                    name: '转炉温度',
                    value: '1580 °C',
                    icon: 'fas fa-temperature-high',
                    iconBg: 'bg-red-100',
                    iconColor: 'text-red-600',
                    valueColor: 'text-red-600',
                    trend: [1560, 1565, 1570, 1575, 1580, 1578, 1580]
                },
                {
                    name: '废气排放浓度',
                    value: '28 mg/m³',
                    icon: 'fas fa-smog',
                    iconBg: 'bg-green-100',
                    iconColor: 'text-green-600',
                    valueColor: 'text-green-600',
                    trend: [32, 30, 29, 30, 28, 29, 28]
                }
            ],
            alertMessages: [
                {
                    title: '3号高炉煤气管道压力波动异常',
                    time: '10分钟前',
                    icon: 'fas fa-exclamation-circle',
                    bgColor: 'bg-red-50',
                    iconBg: 'bg-red-100',
                    iconColor: 'text-red-600',
                    textColor: 'text-red-700'
                },
                {
                    title: '2号转炉除尘设备效率下降',
                    time: '25分钟前',
                    icon: 'fas fa-exclamation-triangle',
                    bgColor: 'bg-yellow-50',
                    iconBg: 'bg-yellow-100',
                    iconColor: 'text-yellow-600',
                    textColor: 'text-yellow-700'
                },
                {
                    title: '1号连铸机冷却水温度升高',
                    time: '42分钟前',
                    icon: 'fas fa-info-circle',
                    bgColor: 'bg-blue-50',
                    iconBg: 'bg-blue-100',
                    iconColor: 'text-blue-600',
                    textColor: 'text-blue-700'
                },
                {
                    title: '热轧车间安全门控制系统离线',
                    time: '1小时前',
                    icon: 'fas fa-exclamation-triangle',
                    bgColor: 'bg-yellow-50',
                    iconBg: 'bg-yellow-100',
                    iconColor: 'text-yellow-600',
                    textColor: 'text-yellow-700'
                }
            ],
            keyCompanies: [
                {
                    name: '河北钢铁集团有限公司',
                    region: '河北省唐山市',
                    logo: 'https://readdy.ai/api/search-image?query=Professional%20steel%20company%20logo%20design%20with%20blue%20and%20silver%20metallic%20elements%20featuring%20abstract%20geometric%20shapes%20that%20represent%20strength%20and%20industrial%20precision.%20The%20logo%20has%20a%20clean%20modern%20corporate%20look%20suitable%20for%20a%20major%20steel%20manufacturing%20enterprise%20with%20a%20white%20background&width=100&height=100&seq=10&orientation=squarish',
                    riskLevel: '高风险',
                    riskLevelClass: 'bg-red-100 text-red-800',
                    lastInspection: '2025-07-02',
                    inspectionResult: '不合格',
                    unresolvedIssues: 8,
                    issuePercentage: 75,
                    issueColor: '#f56565',
                    status: '运行中',
                    statusColor: 'bg-green-500'
                },
                {
                    name: '山东泰山钢铁有限公司',
                    region: '山东省济南市',
                    logo: 'https://readdy.ai/api/search-image?query=Modern%20steel%20industry%20logo%20featuring%20a%20stylized%20mountain%20silhouette%20integrated%20with%20steel%20beam%20elements%20in%20dark%20blue%20and%20gray%20colors.%20The%20design%20is%20clean%20and%20professional%20with%20a%20white%20background%20suitable%20for%20a%20major%20steel%20manufacturing%20company%20based%20near%20mountains&width=100&height=100&seq=11&orientation=squarish',
                    riskLevel: '高风险',
                    riskLevelClass: 'bg-red-100 text-red-800',
                    lastInspection: '2025-07-01',
                    inspectionResult: '整改中',
                    unresolvedIssues: 6,
                    issuePercentage: 60,
                    issueColor: '#ed8936',
                    status: '运行中',
                    statusColor: 'bg-green-500'
                },
                {
                    name: '辽宁鞍钢集团有限公司',
                    region: '辽宁省鞍山市',
                    logo: 'https://readdy.ai/api/search-image?query=Professional%20corporate%20logo%20for%20a%20major%20steel%20company%20featuring%20a%20stylized%20letter%20A%20combined%20with%20steel%20beam%20elements%20in%20blue%20and%20gray%20colors.%20The%20design%20is%20clean%20and%20modern%20with%20a%20white%20background%20suitable%20for%20a%20state-owned%20steel%20enterprise&width=100&height=100&seq=12&orientation=squarish',
                    riskLevel: '中风险',
                    riskLevelClass: 'bg-yellow-100 text-yellow-800',
                    lastInspection: '2025-06-28',
                    inspectionResult: '合格',
                    unresolvedIssues: 3,
                    issuePercentage: 30,
                    issueColor: '#ecc94b',
                    status: '运行中',
                    statusColor: 'bg-green-500'
                },
                {
                    name: '湖北武钢有限责任公司',
                    region: '湖北省武汉市',
                    logo: 'https://readdy.ai/api/search-image?query=Modern%20steel%20industry%20logo%20with%20a%20stylized%20W%20shape%20integrated%20with%20steel%20beam%20elements%20in%20blue%20and%20gray%20colors.%20The%20design%20is%20clean%20and%20professional%20with%20a%20white%20background%20suitable%20for%20a%20major%20steel%20manufacturing%20company%20based%20in%20central%20China&width=100&height=100&seq=13&orientation=squarish',
                    riskLevel: '高风险',
                    riskLevelClass: 'bg-red-100 text-red-800',
                    lastInspection: '2025-06-25',
                    inspectionResult: '不合格',
                    unresolvedIssues: 12,
                    issuePercentage: 85,
                    issueColor: '#f56565',
                    status: '部分停产',
                    statusColor: 'bg-yellow-500'
                },
                {
                    name: '江苏沿海钢铁集团',
                    region: '江苏省南通市',
                    logo: 'https://readdy.ai/api/search-image?query=Corporate%20logo%20for%20a%20coastal%20steel%20company%20featuring%20blue%20wave%20elements%20combined%20with%20steel%20industry%20symbols%20in%20a%20modern%20design.%20The%20logo%20has%20a%20clean%20professional%20look%20with%20a%20white%20background%20suitable%20for%20a%20major%20steel%20manufacturing%20enterprise%20located%20near%20the%20coast&width=100&height=100&seq=14&orientation=squarish',
                    riskLevel: '中风险',
                    riskLevelClass: 'bg-yellow-100 text-yellow-800',
                    lastInspection: '2025-06-30',
                    inspectionResult: '整改中',
                    unresolvedIssues: 5,
                    issuePercentage: 45,
                    issueColor: '#ecc94b',
                    status: '运行中',
                    statusColor: 'bg-green-500'
                }
            ],
            currentInspectionPeriod: 'year',
            currentIssueFilter: 'unresolved'
        };
    },
    mounted() {
        try {
            this.initEnterpriseMap();
            this.initTrendCharts();
            this.initInspectionCompletionChart();
            this.initInspectionTypeChart();
            this.initInspectionTrendChart();
            this.initIssueTypeChart();
            this.initRiskLevelChart();
            this.initFixStatusChart();
        } catch (error) {
        }
        // 响应窗口大小变化
        window.addEventListener('resize', this.handleResize);
        // 更新时间
        this.updateCurrentTime();
        setInterval(this.updateCurrentTime, 1000);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        clearInterval(this.timeInterval);
    },
    methods: {
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },
        updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        handleResize() {
            // 获取所有图表实例并调整大小
            const chartRefs = [
                this.$refs.enterpriseMap,
                this.$refs.inspectionCompletionChart,
                this.$refs.inspectionTypeChart,
                this.$refs.inspectionTrendChart,
                this.$refs.issueTypeChart,
                this.$refs.riskLevelChart,
                this.$refs.fixStatusChart
            ];
            chartRefs.forEach(ref => {
                if (ref) {
                    const chart = echarts.getInstanceByDom(ref);
                    if (chart) {
                        chart.resize();
                    }
                }
            });
            // 调整趋势小图表大小
            this.realTimeMetrics.forEach((metric, index) => {
                const chartRef = this.$refs[`trendChart${index}`];
                if (chartRef) {
                    const chart = echarts.getInstanceByDom(chartRef);
                    if (chart) {
                        chart.resize();
                    }
                }
            });
        },
        initEnterpriseMap(filteredData = null) {
            // 检查DOM元素是否存在
            if (!this.$refs.enterpriseMap) {
                return;
            }
            
            // 注册中国地图数据
            chinaMap(echarts);
            const chart = echarts.init(this.$refs.enterpriseMap);
            
            // 地区到省份的映射关系
            const regionToProvinceMap = {
                '华北地区': ['北京', '天津', '河北', '山西', '内蒙古'],
                '华东地区': ['上海', '江苏', '浙江', '安徽', '福建', '江西', '山东'],
                '华中地区': ['河南', '湖北', '湖南'],
                '华南地区': ['广东', '广西', '海南'],
                '西南地区': ['重庆', '四川', '贵州', '云南', '西藏'],
                '西北地区': ['陕西', '甘肃', '青海', '宁夏', '新疆'],
                '东北地区': ['辽宁', '吉林', '黑龙江']
            };
            
            // 使用过滤后的数据或默认数据
            let regionStats;
            if (filteredData) {
                // 计算过滤后数据的地区统计
                regionStats = {};
                filteredData.forEach(enterprise => {
                    regionStats[enterprise.region] = (regionStats[enterprise.region] || 0) + 1;
                });
            } else {
                // 默认企业数据统计各地区企业数量
                regionStats = {
                    '华北地区': 85,
                    '华东地区': 123,
                    '华中地区': 67,
                    '华南地区': 48,
                    '西南地区': 38,
                    '西北地区': 29,
                    '东北地区': 42
                };
            }
            
            // 将地区数据映射到具体省份
            const provinceStats = {};
            Object.keys(regionStats).forEach(region => {
                const provinces = regionToProvinceMap[region];
                if (provinces) {
                    const enterpriseCount = regionStats[region] || 0;
                    if (enterpriseCount === 0) {
                        // 如果该地区没有企业，所有省份都设为0
                        provinces.forEach(province => {
                            provinceStats[province] = 0;
                        });
                    } else {
                        const countPerProvince = Math.ceil(enterpriseCount / provinces.length);
                        provinces.forEach((province, index) => {
                            // 为了更真实的分布，给不同省份分配不同的企业数量
                            let count = countPerProvince;
                            if (index === 0) {
                                // 第一个省份分配稍多一些企业
                                count = Math.ceil(enterpriseCount * 0.4);
                            } else if (index === 1 && provinces.length > 1) {
                                // 第二个省份分配中等数量
                                count = Math.ceil(enterpriseCount * 0.3);
                            } else {
                                // 其他省份平均分配剩余企业
                                const remaining = enterpriseCount - Math.ceil(enterpriseCount * 0.4) - Math.ceil(enterpriseCount * 0.3);
                                count = Math.max(0, Math.floor(remaining / (provinces.length - 2)));
                            }
                            provinceStats[province] = count;
                        });
                    }
                }
            });
            
            // 转换为图表数据格式
            const mapData = Object.keys(provinceStats).map(province => ({
                name: province,
                value: provinceStats[province]
            }));
            
            // 计算最大值用于visualMap
            const maxValue = Math.max(...Object.values(provinceStats), 1);
            
            const option = {
                title: {
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: '#333',
                        fontSize: 16,
                        fontWeight: 'normal'
                    },
                    subtextStyle: {
                        color: '#666'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return `${params.name}<br/>企业数量: ${params.value || 0} 家<br/>分布密度: ${params.value >= maxValue * 0.8 ? '高密度' :
                            params.value >= maxValue * 0.5 ? '中密度' :
                                params.value >= maxValue * 0.2 ? '低密度' :
                                    '极少'
                            }`;
                    }
                },
                visualMap: {
                    min: 0,
                    max: maxValue,
                    left: 30,
                    bottom: 30,
                    text: ['企业多', '企业少'],
                    inRange: {
                        color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
                    },
                    calculable: true,
                    textStyle: {
                        color: '#666'
                    },
                    dimension: 0
                },
                toolbox: {
                    show: true,
                    right: 30,
                    top: 20,
                    feature: {
                        dataView: { show: true, readOnly: true },
                        saveAsImage: { show: true },
                    }
                },
                series: [
                    {
                        name: '企业数量',
                        type: 'map',
                        map: 'china',
                        roam: true,
                        zoom: 1,
                        center: [104.0, 37.5],
                        scaleLimit: {
                            min: 0.8,
                            max: 3
                        },
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 10
                        },
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff',
                                fontSize: 12,
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                areaColor: '#ff7875'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        data: mapData
                    }
                ]
            };
            chart.setOption(option);
            
            // 监听地图点击事件
            chart.on('click', (params) => {
                if (params.componentType === 'series') {
                    const regionName = params.name;
                    const regionValue = params.value;
                    // 这里可以添加点击后的交互逻辑
                }
            });
        },
        initTrendCharts() {
            // 定义颜色映射表，将Tailwind类名映射到实际颜色值
            const colorMap = {
                'text-blue-600': '#3182ce',
                'text-red-600': '#e53e3e',
                'text-green-600': '#38a169',
                'text-yellow-600': '#d69e2e',
                'bg-blue-100': '#ebf8ff',
                'bg-red-100': '#fff5f5',
                'bg-green-100': '#f0fff4',
                'bg-yellow-100': '#fffff0'
            };

            this.realTimeMetrics.forEach((metric, index) => {
                const chartRef = this.$refs[`trendChart${index}`];
                if (!chartRef) {
                    return;
                }

                try {
                    const chart = echarts.init(chartRef);

                    // 使用颜色映射表获取实际颜色值
                    const lineColor = colorMap[metric.iconColor] || '#3182ce'; // 默认蓝色
                    const areaColor = colorMap[metric.iconBg] || '#ebf8ff'; // 默认浅蓝色

                    const option = {
                        animation: false,
                        grid: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        },
                        xAxis: {
                            type: 'category',
                            show: false,
                            data: [1, 2, 3, 4, 5, 6, 7]
                        },
                        yAxis: {
                            type: 'value',
                            show: false
                        },
                        series: [
                            {
                                data: metric.trend,
                                type: 'line',
                                showSymbol: false,
                                lineStyle: {
                                    width: 2,
                                    color: lineColor
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: areaColor
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(255, 255, 255, 0.1)'
                                            }
                                        ]
                                    }
                                }
                            }
                        ]
                    };
                    chart.setOption(option);
                } catch (error) {
                    
                }
            });
        },
        initInspectionCompletionChart() {
            if (!this.$refs.inspectionCompletionChart) return;
            const chart = echarts.init(this.$refs.inspectionCompletionChart);
            const option = {
                animation: false,
                title: {
                    text: '巡查完成情况',
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '巡查完成情况',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1256, name: '已完成', itemStyle: { color: '#4299e1' } },
                            { value: 320, name: '进行中', itemStyle: { color: '#ecc94b' } },
                            { value: 180, name: '未开始', itemStyle: { color: '#a0aec0' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);
        },
        initInspectionTypeChart() {
            if (!this.$refs.inspectionTypeChart) return;
            const chart = echarts.init(this.$refs.inspectionTypeChart);
            const option = {
                animation: false,
                title: {
                    text: '巡查类型分布',
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '巡查类型',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '45%'],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 735, name: '常规巡查', itemStyle: { color: '#4299e1' } },
                            { value: 580, name: '专项巡查', itemStyle: { color: '#ecc94b' } },
                            { value: 300, name: '应急巡查', itemStyle: { color: '#f56565' } },
                            { value: 141, name: '复查', itemStyle: { color: '#805ad5' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);
        },
        initInspectionTrendChart() {
            if (!this.$refs.inspectionTrendChart) return;
            const chart = echarts.init(this.$refs.inspectionTrendChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096',
                            fontSize: 10
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#718096',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '常规巡查',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#4299e1'
                        },
                        data: [120, 132, 101, 134, 90, 130, 110]
                    },
                    {
                        name: '专项巡查',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#ecc94b'
                        },
                        data: [60, 72, 71, 74, 190, 130, 110]
                    },
                    {
                        name: '应急巡查',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#f56565'
                        },
                        data: [20, 32, 21, 34, 50, 30, 40]
                    },
                    {
                        name: '复查',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#805ad5'
                        },
                        data: [10, 12, 11, 14, 30, 10, 20]
                    }
                ]
            };
            chart.setOption(option);
        },
        initIssueTypeChart() {
            if (!this.$refs.issueTypeChart) return;
            const chart = echarts.init(this.$refs.issueTypeChart);
            const option = {
                animation: false,
                title: {
                    text: '隐患类型分布',
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '隐患类型',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '45%'],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 110, name: '设备隐患', itemStyle: { color: '#f56565' } },
                            { value: 85, name: '工艺隐患', itemStyle: { color: '#ed8936' } },
                            { value: 65, name: '消防隐患', itemStyle: { color: '#ecc94b' } },
                            { value: 45, name: '电气隐患', itemStyle: { color: '#38b2ac' } },
                            { value: 25, name: '特种设备', itemStyle: { color: '#4299e1' } },
                            { value: 12, name: '其他隐患', itemStyle: { color: '#805ad5' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);
        },
        initRiskLevelChart() {
            if (!this.$refs.riskLevelChart) return;
            const chart = echarts.init(this.$refs.riskLevelChart);
            const option = {
                animation: false,
                title: {
                    text: '风险等级占比',
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '风险等级',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 98, name: '高风险', itemStyle: { color: '#f56565' } },
                            { value: 156, name: '中风险', itemStyle: { color: '#ecc94b' } },
                            { value: 88, name: '低风险', itemStyle: { color: '#48bb78' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);
        },
        initFixStatusChart() {
            if (!this.$refs.fixStatusChart) return;
            const chart = echarts.init(this.$refs.fixStatusChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096',
                            fontSize: 10
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#718096',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '已整改',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#48bb78'
                        },
                        data: [30, 42, 51, 54, 60, 52, 45]
                    },
                    {
                        name: '整改中',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#ecc94b'
                        },
                        data: [15, 22, 31, 34, 20, 30, 25]
                    },
                    {
                        name: '未整改',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#f56565'
                        },
                        data: [10, 12, 15, 14, 10, 15, 12]
                    }
                ]
            };
            chart.setOption(option);
        },
        changeInspectionPeriod(period) {
            this.currentInspectionPeriod = period;

            // 更新巡查完成情况图表
            if (this.$refs.inspectionCompletionChart) {
                const chart = echarts.init(this.$refs.inspectionCompletionChart);
                const data = this.getInspectionCompletionData(period);
                chart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }

            // 更新巡查类型分布图表
            if (this.$refs.inspectionTypeChart) {
                const chart = echarts.init(this.$refs.inspectionTypeChart);
                const data = this.getInspectionTypeData(period);
                chart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }

            // 更新巡查趋势分析图表
            if (this.$refs.inspectionTrendChart) {
                const chart = echarts.init(this.$refs.inspectionTrendChart);
                const option = this.getInspectionTrendOption(period);
                chart.setOption(option);
            }

            
        },

        // 获取不同时间段的巡查完成情况数据
        getInspectionCompletionData(period) {
            // 模拟不同时间段的数据
            const dataMap = {
                month: [
                    { value: 156, name: '已完成', itemStyle: { color: '#4299e1' } },
                    { value: 80, name: '进行中', itemStyle: { color: '#ecc94b' } },
                    { value: 40, name: '未开始', itemStyle: { color: '#a0aec0' } }
                ],
                quarter: [
                    { value: 580, name: '已完成', itemStyle: { color: '#4299e1' } },
                    { value: 180, name: '进行中', itemStyle: { color: '#ecc94b' } },
                    { value: 90, name: '未开始', itemStyle: { color: '#a0aec0' } }
                ],
                year: [
                    { value: 1256, name: '已完成', itemStyle: { color: '#4299e1' } },
                    { value: 320, name: '进行中', itemStyle: { color: '#ecc94b' } },
                    { value: 180, name: '未开始', itemStyle: { color: '#a0aec0' } }
                ]
            };
            return dataMap[period] || dataMap.year;
        },

        // 获取不同时间段的巡查类型分布数据
        getInspectionTypeData(period) {
            // 模拟不同时间段的数据
            const dataMap = {
                month: [
                    { value: 85, name: '常规巡查', itemStyle: { color: '#4299e1' } },
                    { value: 65, name: '专项巡查', itemStyle: { color: '#ecc94b' } },
                    { value: 45, name: '应急巡查', itemStyle: { color: '#f56565' } },
                    { value: 25, name: '复查', itemStyle: { color: '#805ad5' } }
                ],
                quarter: [
                    { value: 320, name: '常规巡查', itemStyle: { color: '#4299e1' } },
                    { value: 240, name: '专项巡查', itemStyle: { color: '#ecc94b' } },
                    { value: 150, name: '应急巡查', itemStyle: { color: '#f56565' } },
                    { value: 80, name: '复查', itemStyle: { color: '#805ad5' } }
                ],
                year: [
                    { value: 735, name: '常规巡查', itemStyle: { color: '#4299e1' } },
                    { value: 580, name: '专项巡查', itemStyle: { color: '#ecc94b' } },
                    { value: 300, name: '应急巡查', itemStyle: { color: '#f56565' } },
                    { value: 141, name: '复查', itemStyle: { color: '#805ad5' } }
                ]
            };
            return dataMap[period] || dataMap.year;
        },

        // 获取不同时间段的巡查趋势分析选项
        getInspectionTrendOption(period) {
            // 模拟不同时间段的数据
            const optionMap = {
                month: {
                    xAxis: [{
                        data: ['第1周', '第2周', '第3周', '第4周']
                    }],
                    series: [
                        {
                            name: '常规巡查',
                            data: [30, 35, 25, 40]
                        },
                        {
                            name: '专项巡查',
                            data: [20, 25, 15, 30]
                        },
                        {
                            name: '应急巡查',
                            data: [10, 8, 12, 15]
                        },
                        {
                            name: '复查',
                            data: [5, 7, 8, 10]
                        }
                    ]
                },
                quarter: {
                    xAxis: [{
                        data: ['1月', '2月', '3月']
                    }],
                    series: [
                        {
                            name: '常规巡查',
                            data: [120, 132, 101]
                        },
                        {
                            name: '专项巡查',
                            data: [60, 72, 71]
                        },
                        {
                            name: '应急巡查',
                            data: [20, 32, 21]
                        },
                        {
                            name: '复查',
                            data: [10, 12, 15]
                        }
                    ]
                },
                year: {
                    xAxis: [{
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
                    }],
                    series: [
                        {
                            name: '常规巡查',
                            data: [120, 132, 101, 134, 90, 130, 110]
                        },
                        {
                            name: '专项巡查',
                            data: [60, 72, 71, 74, 190, 130, 110]
                        },
                        {
                            name: '应急巡查',
                            data: [20, 32, 21, 34, 50, 30, 40]
                        },
                        {
                            name: '复查',
                            data: [10, 12, 15, 14, 12, 10, 15]
                        }
                    ]
                }
            };
            return optionMap[period] || optionMap.year;
        },
        changeIssueFilter(filter) {
            this.currentIssueFilter = filter;
            // 更新隐患类型分布图表
            this.updateIssueTypeChart(filter);
            // 更新风险等级分布图表
            this.updateRiskLevelChart(filter);
            // 更新整改情况统计图表
            this.updateFixStatusChart(filter);
        },

        // 更新隐患类型分布图表
        updateIssueTypeChart(filter) {
            const chart = echarts.getInstanceByDom(this.$refs.issueTypeChart);
            if (!chart) return;

            // 根据筛选条件生成不同的数据
            let data = [];
            if (filter === 'all') {
                data = [
                    { value: 42, name: '设备隐患' },
                    { value: 38, name: '工艺隐患' },
                    { value: 32, name: '管理隐患' },
                    { value: 28, name: '环境隐患' },
                    { value: 25, name: '人员隐患' }
                ];
            } else if (filter === 'unresolved') {
                data = [
                    { value: 18, name: '设备隐患' },
                    { value: 15, name: '工艺隐患' },
                    { value: 12, name: '管理隐患' },
                    { value: 8, name: '环境隐患' },
                    { value: 3, name: '人员隐患' }
                ];
            } else if (filter === 'resolved') {
                data = [
                    { value: 24, name: '设备隐患' },
                    { value: 23, name: '工艺隐患' },
                    { value: 20, name: '管理隐患' },
                    { value: 20, name: '环境隐患' },
                    { value: 22, name: '人员隐患' }
                ];
            }

            chart.setOption({
                series: [{
                    data: data
                }]
            });
        },

        // 更新风险等级分布图表
        updateRiskLevelChart(filter) {
            const chart = echarts.getInstanceByDom(this.$refs.riskLevelChart);
            if (!chart) return;

            // 根据筛选条件生成不同的数据
            let data = [];
            if (filter === 'all') {
                data = [
                    { value: 45, name: '一般风险' },
                    { value: 35, name: '较大风险' },
                    { value: 20, name: '重大风险' }
                ];
            } else if (filter === 'unresolved') {
                data = [
                    { value: 15, name: '一般风险' },
                    { value: 25, name: '较大风险' },
                    { value: 16, name: '重大风险' }
                ];
            } else if (filter === 'resolved') {
                data = [
                    { value: 30, name: '一般风险' },
                    { value: 10, name: '较大风险' },
                    { value: 4, name: '重大风险' }
                ];
            }

            chart.setOption({
                series: [{
                    data: data
                }]
            });
        },

        // 更新整改情况统计图表
        updateFixStatusChart(filter) {
            const chart = echarts.getInstanceByDom(this.$refs.fixStatusChart);
            if (!chart) return;

            // 根据筛选条件生成不同的数据
            let xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月'];
            let series = [];

            if (filter === 'all') {
                series = [
                    {
                        name: '发现隐患',
                        data: [45, 52, 38, 65, 42, 58]
                    },
                    {
                        name: '已整改',
                        data: [38, 45, 32, 55, 32, 44]
                    }
                ];
            } else if (filter === 'unresolved') {
                series = [
                    {
                        name: '未整改',
                        data: [7, 7, 6, 10, 10, 14]
                    }
                ];
            } else if (filter === 'resolved') {
                series = [
                    {
                        name: '已整改',
                        data: [38, 45, 32, 55, 32, 44]
                    }
                ];
            }

            chart.setOption({
                xAxis: {
                    data: xAxisData
                },
                series: series
            });
        },

        // 查看企业详情
        viewCompanyDetail(company) {
            this.currentCompanyDetail = company;
            this.showCompanyDetailModal = true;
        },

        // 安排巡查
        scheduleInspection(index) {
            
            this.scheduleTargetIndex = index;
            this.scheduleTargetCompany = this.keyCompanies[index] || null;
            this.showScheduleModal = true;
        },

        // 从企业详情弹窗发起安排巡查
        openScheduleFromDetail() {
            if (this.currentCompanyDetail) {
                // 尝试根据名称匹配索引
                const idx = this.keyCompanies.findIndex(c => c.name === this.currentCompanyDetail.name);
                this.scheduleTargetIndex = idx >= 0 ? idx : null;
                this.scheduleTargetCompany = this.currentCompanyDetail;
                this.showScheduleModal = true;
                this.showCompanyDetailModal = false;
            }
        },

        // 确认安排巡查
        confirmSchedule() {
            if (this.scheduleTargetIndex !== null && this.scheduleTargetIndex >= 0) {
                this.keyCompanies.splice(this.scheduleTargetIndex, 1);
            } else if (this.scheduleTargetCompany) {
                const idx = this.keyCompanies.findIndex(c => c.name === this.scheduleTargetCompany.name);
                if (idx >= 0) this.keyCompanies.splice(idx, 1);
            }
            this.cancelSchedule();
        },

        // 取消安排巡查
        cancelSchedule() {
            this.showScheduleModal = false;
            this.scheduleTargetIndex = null;
            this.scheduleTargetCompany = null;
        },

        // 企业地理分布筛选相关方法
        showEnterpriseFilter() {
            this.showEnterpriseFilterModal = true;
        },

        closeEnterpriseFilter() {
            this.showEnterpriseFilterModal = false;
        },

        applyEnterpriseFilter() {
            // 应用筛选条件
            
            // 更新地图和相关数据
            this.updateEnterpriseMap();
            this.updateRegionDistribution();
            // 更新其他相关图表
            this.updateFilteredCharts();
            this.closeEnterpriseFilter();
        },

        resetEnterpriseFilter() {
            // 重置筛选条件
            this.enterpriseFilter = {
                region: '全部区域',
                riskLevel: '全部等级',
                status: '全部状态',
                companySize: '全部规模'
            };
            this.updateEnterpriseMap();
            this.updateRegionDistribution();
            // 更新其他相关图表
            this.updateFilteredCharts();
        },

        updateEnterpriseMap() {
            // 根据筛选条件更新地图数据
            const filteredData = this.getFilteredEnterpriseData();
            
            // 重新初始化地图
            this.initEnterpriseMap(filteredData);
        },

        updateRegionDistribution() {
            // 根据筛选条件更新区域分布数据
            const filteredData = this.getFilteredEnterpriseData();
            this.regionDistribution = this.calculateRegionDistribution(filteredData);
        },

        getFilteredEnterpriseData() {
            // 模拟企业数据
            const allEnterprises = [
                // 华北地区
                ...Array.from({length: 85}, (_, i) => ({
                    id: `hb_${i}`,
                    region: '华北地区',
                    province: ['北京', '天津', '河北', '山西', '内蒙古'][i % 5],
                    riskLevel: ['高风险', '中风险', '低风险'][i % 3],
                    status: ['正常运营', '停产整顿', '暂停营业'][i % 3],
                    companySize: ['大型企业', '中型企业', '小型企业', '微型企业'][i % 4]
                })),
                // 华东地区
                ...Array.from({length: 123}, (_, i) => ({
                    id: `hd_${i}`,
                    region: '华东地区',
                    province: ['上海', '江苏', '浙江', '安徽', '福建', '江西', '山东'][i % 7],
                    riskLevel: ['高风险', '中风险', '低风险'][i % 3],
                    status: ['正常运营', '停产整顿', '暂停营业'][i % 3],
                    companySize: ['大型企业', '中型企业', '小型企业', '微型企业'][i % 4]
                })),
                // 华中地区
                ...Array.from({length: 67}, (_, i) => ({
                    id: `hz_${i}`,
                    region: '华中地区',
                    province: ['河南', '湖北', '湖南'][i % 3],
                    riskLevel: ['高风险', '中风险', '低风险'][i % 3],
                    status: ['正常运营', '停产整顿', '暂停营业'][i % 3],
                    companySize: ['大型企业', '中型企业', '小型企业', '微型企业'][i % 4]
                })),
                // 华南地区
                ...Array.from({length: 48}, (_, i) => ({
                    id: `hn_${i}`,
                    region: '华南地区',
                    province: ['广东', '广西', '海南',"台湾", "香港", "澳门","南海诸岛"][i % 6],
                    riskLevel: ['高风险', '中风险', '低风险'][i % 3],
                    status: ['正常运营', '停产整顿', '暂停营业'][i % 3],
                    companySize: ['大型企业', '中型企业', '小型企业', '微型企业'][i % 4]
                })),
                // 西南地区
                ...Array.from({length: 38}, (_, i) => ({
                    id: `xn_${i}`,
                    region: '西南地区',
                    province: ['重庆', '四川', '贵州', '云南', '西藏'][i % 5],
                    riskLevel: ['高风险', '中风险', '低风险'][i % 3],
                    status: ['正常运营', '停产整顿', '暂停营业'][i % 3],
                    companySize: ['大型企业', '中型企业', '小型企业', '微型企业'][i % 4]
                })),
                // 西北地区
                ...Array.from({length: 29}, (_, i) => ({
                    id: `xb_${i}`,
                    region: '西北地区',
                    province: ['陕西', '甘肃', '青海', '宁夏', '新疆'][i % 5],
                    riskLevel: ['高风险', '中风险', '低风险'][i % 3],
                    status: ['正常运营', '停产整顿', '暂停营业'][i % 3],
                    companySize: ['大型企业', '中型企业', '小型企业', '微型企业'][i % 4]
                })),
                // 东北地区
                ...Array.from({length: 42}, (_, i) => ({
                    id: `db_${i}`,
                    region: '东北地区',
                    province: ['辽宁', '吉林', '黑龙江'][i % 3],
                    riskLevel: ['高风险', '中风险', '低风险'][i % 3],
                    status: ['正常运营', '停产整顿', '暂停营业'][i % 3],
                    companySize: ['大型企业', '中型企业', '小型企业', '微型企业'][i % 4]
                }))
            ];

            // 应用筛选条件
            let filtered = allEnterprises;

            if (this.enterpriseFilter.region !== '全部区域') {
                filtered = filtered.filter(enterprise => enterprise.region === this.enterpriseFilter.region);
            }

            if (this.enterpriseFilter.riskLevel !== '全部等级') {
                filtered = filtered.filter(enterprise => enterprise.riskLevel === this.enterpriseFilter.riskLevel);
            }

            if (this.enterpriseFilter.status !== '全部状态') {
                filtered = filtered.filter(enterprise => enterprise.status === this.enterpriseFilter.status);
            }

            if (this.enterpriseFilter.companySize !== '全部规模') {
                filtered = filtered.filter(enterprise => enterprise.companySize === this.enterpriseFilter.companySize);
            }

            return filtered;
        },

        calculateRegionDistribution(enterprises) {
             // 计算区域分布
             const regionCounts = {};
             const regionColors = {
                 '华北地区': '#4299e1',
                 '华东地区': '#48bb78',
                 '华南地区': '#ecc94b',
                 '华中地区': '#ed8936',
                 '西北地区': '#9f7aea',
                 '西南地区': '#f56565',
                 '东北地区': '#38b2ac'
             };
 
             enterprises.forEach(enterprise => {
                 regionCounts[enterprise.region] = (regionCounts[enterprise.region] || 0) + 1;
             });
 
             const total = enterprises.length;
             
             return Object.keys(regionCounts).map(region => ({
                 name: region,
                 count: regionCounts[region],
                 percentage: total > 0 ? ((regionCounts[region] / total) * 100).toFixed(1) : 0,
                 color: regionColors[region] || '#718096'
             }));
         },

         updateFilteredCharts() {
             // 根据筛选条件更新其他相关图表
             const filteredData = this.getFilteredEnterpriseData();
             
             // 更新隐患类型分布图表（基于筛选后的企业数据）
             this.updateIssueTypeChartByFilter(filteredData);
             
             // 更新风险等级分布图表（基于筛选后的企业数据）
             this.updateRiskLevelChartByFilter(filteredData);
             
             // 更新整改情况统计图表（基于筛选后的企业数据）
             this.updateFixStatusChartByFilter(filteredData);
         },

         updateIssueTypeChartByFilter(filteredData) {
             const chart = echarts.getInstanceByDom(this.$refs.issueTypeChart);
             if (!chart) return;

             // 根据筛选后的企业数据生成隐患类型分布
             const total = filteredData.length;
             const data = [
                 { value: Math.floor(total * 0.25), name: '设备隐患', itemStyle: { color: '#f56565' } },
                 { value: Math.floor(total * 0.20), name: '工艺隐患', itemStyle: { color: '#ed8936' } },
                 { value: Math.floor(total * 0.18), name: '消防隐患', itemStyle: { color: '#ecc94b' } },
                 { value: Math.floor(total * 0.15), name: '电气隐患', itemStyle: { color: '#38b2ac' } },
                 { value: Math.floor(total * 0.12), name: '特种设备', itemStyle: { color: '#4299e1' } },
                 { value: Math.floor(total * 0.10), name: '其他隐患', itemStyle: { color: '#9f7aea' } }
             ];

             chart.setOption({
                 series: [{
                     data: data
                 }]
             });
         },

         updateRiskLevelChartByFilter(filteredData) {
             const chart = echarts.getInstanceByDom(this.$refs.riskLevelChart);
             if (!chart) return;

             // 根据筛选后的企业数据生成风险等级分布
             const riskCounts = { '高风险': 0, '中风险': 0, '低风险': 0 };
             filteredData.forEach(enterprise => {
                 riskCounts[enterprise.riskLevel]++;
             });

             const data = [
                 { value: riskCounts['低风险'], name: '一般风险', itemStyle: { color: '#48bb78' } },
                 { value: riskCounts['中风险'], name: '较大风险', itemStyle: { color: '#ecc94b' } },
                 { value: riskCounts['高风险'], name: '重大风险', itemStyle: { color: '#f56565' } }
             ];

             chart.setOption({
                 series: [{
                     data: data
                 }]
             });
         },

         updateFixStatusChartByFilter(filteredData) {
             const chart = echarts.getInstanceByDom(this.$refs.fixStatusChart);
             if (!chart) return;

             // 根据筛选后的企业数据生成整改情况统计
             const total = filteredData.length;
             const resolvedCount = Math.floor(total * 0.7); // 假设70%已整改
             const unresolvedCount = total - resolvedCount;

             const series = [
                 {
                     name: '已整改',
                     data: [resolvedCount, resolvedCount, resolvedCount, resolvedCount, resolvedCount, resolvedCount]
                 },
                 {
                     name: '未整改',
                     data: [unresolvedCount, unresolvedCount, unresolvedCount, unresolvedCount, unresolvedCount, unresolvedCount]
                 }
             ];

             chart.setOption({
                 series: series
             });
         }
    }
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义颜色类 */
.bg-blue-100 {
    background-color: #ebf8ff;
}

.bg-red-100 {
    background-color: #fed7d7;
}

.bg-green-100 {
    background-color: #c6f6d5;
}

.bg-yellow-100 {
    background-color: #fefcbf;
}

.text-blue-600 {
    color: #3182ce;
}

.text-red-600 {
    color: #e53e3e;
}

.text-green-600 {
    color: #38a169;
}

.text-yellow-600 {
    color: #d69e2e;
}
</style>